<template>
    <div>
        <div class="add">
            <div></div>
            <el-button class="add-button" type="text" @click="add">增加</el-button>
        </div>
        <!-- 表格 -->
        <div class="tab">
            <el-table :data="list" style="width: 100%; border-radius: 5px;">
                <el-table-column sortable prop="create_time" :label="PorgranList.create_time" />
                <el-table-column prop="name" :label="PorgranList.name" />
                <el-table-column prop="industry_id" :label="PorgranList.industry_id" />
                <el-table-column width="180">
                    <template slot-scope="scope">
                        <el-button type="text" @click="updata(scope.row.id)"
                            style=" font-size: 16px; padding: 10px 20px;border-radius: 0; background: #08cfde;color: #000000;">编辑</el-button>
                        <el-button type="text" @click="del(scope.row.id)"
                            style="font-size: 16px; padding: 10px 20px; border-radius: 0; border: 1px solid #666; background: #fff;color: #666; font-size: 16px;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div class="example-pagination-block">
            <div class="example-demonstration">
            </div>
            <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 30, 40]" :total="tableData.length"
                :page-size="page.pagesize" @current-change="changepage" @size-change="changesize" />
        </div>
        <!-- 放大图片的dialog -->
        <el-dialog class="dialog" :visible.sync="dialogVisibles" width="50%">
            <img :src="bigimg" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { getDetailsPageList, delDetailsPage } from '@/api/DetailsPage'
import { getIndustryListByType } from "@/api/Industry"//查询父级ID

export default {
    data() {
        return {
            PorgranList: {
                create_time: "时间",
                name: "名字",
                industry_id: "类目"
            },
            page: {
                //分页
                page: 1,
                pagesize: 10
            },
            tableData: [],
            list: [],//table中的数据
            // dialogVisible: false,//对话框是否显示
            dialogVisibles: false,//图片显示区域的dialog
            bigimg: '',//放大后的图片
            data: {
                name: "",
                id: ""
            },
            id: 0
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            getIndustryListByType(1).then(ass => {
                getDetailsPageList().then((res) => {
                    console.log(res, 564);
                    this.tableData = res.data.data.map(item => {
                        const mathlist = ass.data.data.find(listitem => listitem.id === item.industry_id)
                        if (mathlist) {
                            return {
                                ...item,
                                industry_id: mathlist.title
                            }
                        } else {
                            return {
                                ...item,
                                industry_id: '无'
                            }
                        }
                    })
                    this.list = this.tableData.slice((this.page.page - 1) * this.page.pagesize, (this.page.page - 1) * this.page.pagesize + this.page.pagesize)
                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
            }).catch(() => {
                this.$message({
                    message: '网络不给力呦',
                    type: 'warning'
                });
            })
        },
        changepage(e) {
            this.page.page = e,
                this.getList()
        },
        changesize(e) {
            this.page.pagesize = e,
                this.getList()
        },
        add() {
            this.$store.state.details = false
        },
        del(id) {
            // 删除数据
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delDetailsPage(id).then(() => {
                    this.getList()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        updata(id) {
            // 编辑数据
            this.$store.state.details = false
            this.$store.state.detailsid = id
        },
        handleClose(done) {
            this.$confirm('确认关闭？').then(() => {
                done();
            }).catch(() => { });
        }
    }
}
</script>
<style scoped lang="less">
.add {
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    .add-button {
        font-size: 16px;
        color: #000000;
        position: absolute;
        top: 70px;
        right: 30px;
        z-index: 1;
        background-color: #08cfde;
        border: none;
        border-radius: 0;
        // padding: 0 10px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

img {
    cursor: pointer;
}

.example-pagination-block {
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;

    .example-demonstration {
        line-height: 32px;
    }
}

.tab {
    margin: 10px;
    padding: 10px;
    background-color: #fff;
}

.dialog {
    img {
        width: 100%;
    }
}
</style>